<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="author" content="挥手の骑士">
    
    
    
    
    
    
    <title>前端规范 JS | 骑士の物语</title>
    <link href="https://yihuishou.gitee.io" rel="prefetch">

    <link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/aos.css">
<link rel="stylesheet" href="/css/style.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/aos.js"></script>
    <script src="/js/highslide/highslide-full.min.js"></script>
    <link rel="stylesheet" href="/js/highslide/highslide.css">
    <style type="text/css">
        @media (max-width: 768px) {
            body {
                background-color: #f0f0f0;
                background: url('/imgs/xsbg.gif');
                background-attachment: fixed;
            }
        }
    </style>
    
    <!--<script type="text/javascript">
      if (document.images) {
        var avatar = new Image();
        avatar.src = '/imgs/avatar.jpg'
        var previews = 'picHD_1.png,picHD_2.png,picHD_3.png,picHD_4.png,picHD_5.png,picHD_6.png,picHD_7.png,picHD_8.png,picHD_9.png,picHD_10.png,picHD_11.png,picHD_12.png,picHD_13.png,picHD_14.png,picHD_15.png,picHD_16.png,picHD_17.png,picHD_18.png,picHD_19.png,picHD_20.png,picHD_21.png,picHD_22.png,picHD_23.png,picHD_24.png,picHD_25.png,picHD_26.png,picHD_27.png,picHD_28.png,picHD_29.png,picHD_30.png,picHD_31.png,picHD_32.png,picHD_33.png,picHD_34.png,picHD_35.png,picHD_36.png,picHD_37.png,picHD_38.png,picHD_39.png,picHD_40.png,picHD_41.png,picHD_42.png'.split(',')
        var previewsPreLoad = []
        for(var i = 0; i < length; i++) {
          previewsPreLoad.push(new Image())
          previewsPreLoad[previewsPreLoad.length - 1].src = '/imgs/preview' + previews[i]
        }
      }
    </script>-->
</head></html>
<body>
    <!-- 背景轮播图功能 -->
    <section class="hidden-xs">
    <ul class="cb-slideshow">
        <li><span>天若</span></li>
        <li><span>有情</span></li>
        <li><span>天亦老</span></li>
        <li><span>我为</span></li>
        <li><span>长者</span></li>
        <li><span>续一秒</span></li>
    </ul>
</section>
    <!-- 欧尼酱功能, 谁用谁知道 -->
    
    <header class="navbar navbar-inverse" id="gal-header">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target=".bs-navbar-collapse"
                    aria-expanded="false">
                <span class="fa fa-lg fa-reorder"></span>
            </button>
            <a href="https://yihuishou.gitee.io">
                
                <style>
                    #gal-header .navbar-brand {
                        height: 54px;
                        line-height: 24px;
                        font-size: 28px;
                        opacity: 1;
                        background-color: rgba(0,0,0,0);
                        text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #228DFF,0 0 35px #228DFF,0 0 40px #228DFF,0 0 50px #228DFF,0 0 75px #228DFF;
                    }
                </style>
                <!-- 这里使用文字(navbar_text or config.title) -->
                <div class="navbar-brand">骑士の物语</div>
                
            </a>
        </div>
        <div class="collapse navbar-collapse bs-navbar-collapse">
            <ul class="nav navbar-nav" id="menu-gal">
                
                
                <li class="">
                    <a href="/">
                        <i class="fa fa-home"></i>首页
                    </a>
                </li>
                
                
                
                <li class="">
                    <a href="/archives">
                        <i class="fa fa-archive"></i>归档
                    </a>
                </li>
                
                
            </ul>
        </div>
    </div>
</header>
    <div id="gal-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 gal-right" id="mainstay">
                    
<article class="article well article-body" id="article">
    <div class="breadcrumb">
        <i class="fa fa-home"></i>
        <a href="https://yihuishou.gitee.io">骑士の物语</a>
        >
        <span>前端规范 JS</span>
    </div>
    <!-- 大型设备详细文章 -->
    <div class="hidden-xs">
        <div class="title-article">
            <h1>
                <a href="/2018/05/18/2028463303/">前端规范 JS</a>
            </h1>
        </div>
        <div class="tag-article">
            
            <span class="label label-gal">
                <i class="fa fa-tags"></i>
                
                <a href="/tags/大前端/">大前端</a>
                
            </span>
            
            <span class="label label-gal">
                <i class="fa fa-calendar"></i> 2018-05-18
            </span>
            
        </div>
    </div>
    <!-- 小型设备详细文章 -->
    <div class="visible-xs">
        <center>
            <div class="title-article">
                <h4>
                    <a href="/2018/05/18/2028463303/">前端规范 JS</a>
                </h4>
            </div>
            <p>
                <i class="fa fa-calendar"></i> 2018-05-18
            </p>
            <p>
                
                <i class="fa fa-tags"></i>
                
                <a href="/tags/大前端/">大前端</a>
                
                
                
            </p>
        </center>
    </div>
    <div class="content-article">
        <h1 id="前端代码规范-—-javascript"><a href="#前端代码规范-—-javascript" class="headerlink" title="前端代码规范 —- javascript"></a>前端代码规范 —- javascript</h1><blockquote>
<p>本文档的目标是使 JavaScript 代码风格保持一致，容易被理解和被维护。</p>
</blockquote>
<p>可以修改开发工具的配置文件并设置格式化快捷键来统一代码风格</p>
<h3 id="基本命名规范"><a href="#基本命名规范" class="headerlink" title="基本命名规范"></a>基本命名规范</h3><p>1、变量、函数名以驼峰式命名，应为名词，具体含义</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> newName</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span>(<span class="params"></span>) </span>&#123;&#125;</span><br></pre></td></tr></table></figure>

<p>2、常量全部大写字母，用_连接</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> THEME_SKIN = <span class="string">'theme-skin'</span></span><br></pre></td></tr></table></figure>

<p>3、函数名以动词开始</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span>(<span class="params"></span>) </span>&#123;&#125; <span class="comment">// 获取</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">setName</span>(<span class="params"></span>) </span>&#123;&#125; <span class="comment">// 设置</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">doName</span>(<span class="params"></span>) </span>&#123;&#125; <span class="comment">// 执行</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">submitName</span>(<span class="params"></span>) </span>&#123;&#125; <span class="comment">// 提交</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">editName</span>(<span class="params"></span>) </span>&#123;&#125; <span class="comment">// 编辑</span></span><br></pre></td></tr></table></figure>

<p>4、返回类型是布尔类型，一般以is开头</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> isEnable = <span class="literal">false</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isCheckName</span>(<span class="params"></span>) </span>&#123;&#125;</span><br></pre></td></tr></table></figure>

<p>5、变量和函数命名，不要担心长度，合乎逻辑重要。</p>
<p>6、class以名词命名，首字母大写</p>
<p>7、文件名、目录名称命名方式 用 - 连接 </p>
<h3 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h3><p>1、单行注释 &nbsp; 必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。// </p>
<p>2、多行注释 &nbsp; 避免使用 /<em>…</em>/ 这样的多行注释。有多行注释内容时，使用多个单行注释。// </p>
<p>3、文档化注释 &nbsp; 为了便于代码阅读和维护，以下内容必须包含以 /<em>*…</em>/ 形式的块注释中。</p>
<p>4、关于函数JSDoc注释  适用.vue文件 (wacth、methods、computed)</p>
<ul>
<li><a href="http://usejsdoc.org/" target="_blank" rel="noopener">JSDoc官方文档http://usejsdoc.org/</a></li>
</ul>
<p>演示一下jsdoc的标准写法：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 解释这个function的作用，可以把处理的思路写下来</span></span><br><span class="line"><span class="comment"> * @param  &#123;Array&#125; param1 - 参数param1的解释</span></span><br><span class="line"><span class="comment"> * @param  &#123;Object&#125; param2 - 参数param2的解释</span></span><br><span class="line"><span class="comment"> * @param  &#123;number&#125; param3 - 参数param3的解释</span></span><br><span class="line"><span class="comment"> * @return &#123;string&#125; 对返回值的解释，如果没有返回值，则不需要添加这一项</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">jsdocExample</span>(<span class="params">param1, param2, param3</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">  <span class="keyword">return</span> <span class="string">''</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="代码风格"><a href="#代码风格" class="headerlink" title="代码风格"></a>代码风格</h3><p><strong>缩进 使用4个空格(不要使用Tab)</strong></p>
<p><strong>忽略分号(不加)</strong></p>
<p><strong>空格</strong></p>
<p>1、 [强制] 二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = !arr.length;</span><br><span class="line">a++;</span><br><span class="line">a = b + c;</span><br></pre></td></tr></table></figure>

<p>2、[强制] 用作代码块起始的左花括号 { 前必须有一个空格。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span>(condition) &#123;&#125;</span><br><span class="line"><span class="keyword">while</span>(condition) &#123;&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcName</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span>(condition)&#123;&#125;</span><br><span class="line"><span class="keyword">while</span> (condition)&#123;&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcName</span>(<span class="params"></span>)</span>&#123;&#125;</span><br></pre></td></tr></table></figure>

<p>3、[强制] if / else / for / while / function / switch / do / try / catch / finally 关键字后，必须有一个空格。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (condition) &#123;&#125;</span><br><span class="line"><span class="keyword">while</span> (condition) &#123;&#125;</span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;)();</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span>(condition) &#123;&#125;</span><br><span class="line"><span class="keyword">while</span>(condition) &#123;&#125;</span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>

<p>4、[强制] 在对象创建时，属性中的 : 之后必须有空格，: 之前不允许有空格。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    a: <span class="number">1</span>,</span><br><span class="line">    b: <span class="number">2</span>,</span><br><span class="line">    c: <span class="number">3</span>,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    a : <span class="number">1</span>,</span><br><span class="line">    b:<span class="number">2</span>,</span><br><span class="line">    c :<span class="number">3</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>5、[强制] 函数声明、具名函数表达式、函数调用中，函数名和 ( 之间不允许有空格。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcName</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"><span class="keyword">var</span> funcName = <span class="function"><span class="keyword">function</span> <span class="title">funcName</span>(<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line">funcName();</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcName</span> (<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"><span class="keyword">var</span> funcName = <span class="function"><span class="keyword">function</span> <span class="title">funcName</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line">funcName ();</span><br></pre></td></tr></table></figure>

<p>6、[强制] , 前不允许有空格</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line">callFunc(a, b)</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line">callFunc(a , b)</span><br></pre></td></tr></table></figure>

<p>7、[强制] 在函数调用、函数声明、括号表达式、属性访问、if / for / while / switch / catch 等语句中，() 和 [] 内紧贴括号部分不允许有空格。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"></span><br><span class="line">callFunc(param1, param2, param3);</span><br><span class="line">save(<span class="keyword">this</span>.list[<span class="keyword">this</span>.indexes[i]]);</span><br><span class="line">needIncream &amp;&amp; (variable += increament);</span><br><span class="line"><span class="keyword">if</span> (num &gt; list.length) &#123;&#125;</span><br><span class="line"><span class="keyword">while</span> (len--) &#123;&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line">callFunc( param1, param2, param3 );</span><br><span class="line">save( <span class="keyword">this</span>.list[ <span class="keyword">this</span>.indexes[ i ] ] );</span><br><span class="line">needIncreament &amp;&amp; ( variable += increament );</span><br><span class="line"><span class="keyword">if</span> ( num &gt; list.length ) &#123;&#125;</span><br><span class="line"><span class="keyword">while</span> ( len-- ) &#123;&#125;</span><br></pre></td></tr></table></figure>

<h3 id="基于eslint-plugin-standard修改eslint规则"><a href="#基于eslint-plugin-standard修改eslint规则" class="headerlink" title="基于eslint-plugin-standard修改eslint规则"></a>基于<code>eslint-plugin-standard</code>修改eslint规则</h3><p>git钩子会强制验证eslint规则，通过后才能提交。后期新项目会在初始化的时候执行git钩子安装命令(必须执行)</p>
<p>eslint 提供 —fix 命令可以修复大部分的error 和warn</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// add your custom rules here 0 忽略 1 warn 2 error</span></span><br><span class="line">       rules: &#123;</span><br><span class="line">       <span class="string">'valid-jsdoc'</span>: [<span class="number">1</span>, &#123;</span><br><span class="line">           requireReturn: <span class="literal">false</span>,</span><br><span class="line">       &#125;],</span><br><span class="line">       <span class="string">'require-jsdoc'</span>: [<span class="number">1</span>, &#123;</span><br><span class="line">           <span class="built_in">require</span>: &#123;</span><br><span class="line">               FunctionDeclaration: <span class="literal">true</span>,</span><br><span class="line">               MethodDefinition: <span class="literal">true</span>,</span><br><span class="line">               ClassDeclaration: <span class="literal">true</span>,</span><br><span class="line">           &#125;,</span><br><span class="line">       &#125;],</span><br><span class="line">       <span class="comment">// 插件验证.vue文件中的jsdoc</span></span><br><span class="line">       <span class="string">'@sweetui/sweet-mobile-sdk/object-literal-jsdoc/obj-doc'</span>: [<span class="number">1</span>, &#123;</span><br><span class="line">           ignoreMethods,</span><br><span class="line">       &#125;],</span><br><span class="line">       <span class="comment">// 缩进4空格 禁用2</span></span><br><span class="line">       <span class="string">'indent'</span>: [<span class="number">1</span>, <span class="number">4</span>],</span><br><span class="line">       <span class="comment">// 禁止条件表达式中出现赋值操作符</span></span><br><span class="line">       <span class="string">'no-cond-assign'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 允许console语句</span></span><br><span class="line">       <span class="string">'no-console'</span>: <span class="number">1</span>,</span><br><span class="line">       <span class="comment">// 允许 debugger</span></span><br><span class="line">       <span class="string">'no-debugger'</span>: <span class="number">1</span>,</span><br><span class="line">       <span class="comment">// var声明</span></span><br><span class="line">       <span class="string">'no-var'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 禁止 function 定义中出现重名参数</span></span><br><span class="line">       <span class="string">'no-dupe-args'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 禁止重复的函数声明</span></span><br><span class="line">       <span class="string">'no-func-assign'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 忽略分号;</span></span><br><span class="line">       <span class="string">'semi'</span>: [<span class="number">1</span>, <span class="string">"never"</span>],</span><br><span class="line">       <span class="comment">// 使用 === 和 !==</span></span><br><span class="line">       <span class="string">'eqeqeq'</span>: [<span class="number">2</span>, <span class="string">'allow-null'</span>],</span><br><span class="line">       <span class="comment">// warn alert、</span></span><br><span class="line">       <span class="string">'no-alert'</span>: <span class="number">1</span>,</span><br><span class="line">       <span class="comment">// 禁用 eval()</span></span><br><span class="line">       <span class="string">'no-eval'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 禁用 with 语句</span></span><br><span class="line">       <span class="string">'no-with'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 要求或禁止使用严格模式指令</span></span><br><span class="line">       <span class="string">'strict'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 要求或禁止 var 声明中的初始化(初值)</span></span><br><span class="line">       <span class="string">'init-declarations'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 不允许 catch 子句的参数与外层作用域中的变量同名</span></span><br><span class="line">       <span class="string">'no-catch-shadow'</span>: <span class="number">0</span>,</span><br><span class="line">       <span class="comment">// 禁止删除变量</span></span><br><span class="line">       <span class="string">'no-delete-var'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 不允许标签与变量同名</span></span><br><span class="line">       <span class="string">'no-label-var'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 禁用特定的全局变量</span></span><br><span class="line">       <span class="string">'no-restricted-globals'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 禁止 var 声明 与外层作用域的变量同名</span></span><br><span class="line">       <span class="string">'no-shadow'</span>: <span class="number">0</span>,</span><br><span class="line">       <span class="comment">// 禁止覆盖受限制的标识符</span></span><br><span class="line">       <span class="string">'no-shadow-restricted-names'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 禁用未声明的变量，除非它们在 /*global */ 注释中被提到</span></span><br><span class="line">       <span class="string">'no-undef'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 禁止将变量初始化为 undefined</span></span><br><span class="line">       <span class="string">'no-undef-init'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 禁止将 undefined 作为标识符</span></span><br><span class="line">       <span class="string">'no-undefined'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 禁止出现未使用过的变量</span></span><br><span class="line">       <span class="string">'no-unused-vars'</span>: [<span class="number">1</span>, &#123;<span class="string">'vars'</span>: <span class="string">'all'</span>, <span class="string">'args'</span>: <span class="string">'none'</span>&#125;],</span><br><span class="line">       <span class="comment">// 不允许在变量定义之前使用它们</span></span><br><span class="line">       <span class="string">'no-use-before-define'</span>: <span class="number">1</span>,</span><br><span class="line">       <span class="comment">// 强制一行的最大长度</span></span><br><span class="line">       <span class="string">'max-len'</span>: [<span class="number">1</span>, <span class="number">160</span>],</span><br><span class="line">       <span class="comment">// 文件末尾强制换行</span></span><br><span class="line">       <span class="string">'eol-last'</span>: <span class="number">0</span>,</span><br><span class="line">       <span class="comment">// 强制使用单引号</span></span><br><span class="line">       <span class="string">'quotes'</span>: [<span class="number">2</span>, <span class="string">'single'</span>],</span><br><span class="line">       <span class="comment">// 禁止修改 const 声明的变量</span></span><br><span class="line">       <span class="string">'no-const-assign'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 禁止标识符中有悬空下划线_bar，这里忽略</span></span><br><span class="line">       <span class="string">'no-underscore-dangle'</span>: <span class="number">0</span>,</span><br><span class="line">       <span class="comment">// 禁用行尾空格</span></span><br><span class="line">       <span class="string">'no-trailing-spaces'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 禁用不必要的嵌套块</span></span><br><span class="line">       <span class="string">'no-lone-blocks'</span>: <span class="number">2</span>,</span><br><span class="line">       <span class="comment">// 强制在 JSX 属性中一致地使用双引号或单引号</span></span><br><span class="line">       <span class="string">'jsx-quotes'</span>: <span class="number">0</span>,</span><br><span class="line">       <span class="comment">// 函数定义时括号前面要不要有空格</span></span><br><span class="line">       <span class="string">'space-before-function-paren'</span>: [<span class="number">1</span>, <span class="string">`never`</span>],</span><br><span class="line">       <span class="comment">//对象字面量项尾不能有逗号 这里忽略</span></span><br><span class="line">       <span class="string">'comma-dangle'</span>: [<span class="number">0</span>, <span class="string">'always'</span>],</span><br><span class="line">       <span class="comment">// 在对象字面量属性中实现键和值之间的一致间隔 &#123;key: value&#125;</span></span><br><span class="line">       <span class="string">'key-spacing'</span>: [<span class="number">1</span>, &#123;<span class="string">'mode'</span>: <span class="string">'strict'</span>&#125;],</span><br><span class="line">       <span class="comment">// 允许对象所有键和值在同一行上</span></span><br><span class="line">       <span class="string">'object-property-newline'</span>: [<span class="number">0</span>, &#123;<span class="string">'allowMultiplePropertiesPerLine'</span>: <span class="literal">true</span>&#125;],</span><br><span class="line">       <span class="comment">// promise reject 参数设置为 * 任意类型</span></span><br><span class="line">       <span class="string">'prefer-promise-reject-errors'</span>: [<span class="number">0</span>, &#123;<span class="string">'allowEmptyReject'</span>: <span class="literal">true</span>&#125;]</span><br><span class="line">   &#125;,</span><br></pre></td></tr></table></figure>


    </div>
</article>


                </div>
                <aside class="col-md-4 gal-left" id="sidebar">
    <!-- 此为sidebar的搜索框, 非搜索结果页面 -->
<aside id="sidebar-search">
    <div class="search hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <form class="form-inline clearfix" id="search-form" method="get"
              action="/search/index.html">
            <input type="text" name="s" class="form-control" id="searchInput" placeholder="搜索文章~" autocomplete="off">
            <button class="btn btn-danger btn-gal" type="submit">
                <i class="fa fa-search"></i>
            </button>
        </form>
    </div>
</aside>
    <aside id="sidebar-author">
    <div class="panel panel-gal" data-aos="flip-right" data-aos-duration="3000">
        <div class="panel-heading" style="text-align: center">
            <i class="fa fa-quote-left"></i>
            挥手の骑士
            <i class="fa fa-quote-right"></i>
        </div>
        <div class="author-panel text-center">
            <img src="/imgs/avatar.jpg" width="140" height="140"
                 alt="个人头像" class="author-image">
            <p class="author-description"></p>
        </div>
    </div>
</aside>
    
    <!-- 要配置好leancloud才能开启此小工具 -->
    
    
    <aside id="sidebar-recent_posts">
    <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <div class="panel-heading">
            <i class="fa fa-refresh"></i>
            近期文章
            <i class="fa fa-times-circle panel-remove"></i>
            <i class="fa fa-chevron-circle-up panel-toggle"></i>
        </div>
        <ul class="list-group list-group-flush">
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/08/18/55226946/">agent v3.2.1 插件激活码</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/07/22/2412014068/">干掉 CMS 未来属于 ZGC</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/07/21/4075219928/">OpenJDK 和 OracleJDK 的抉择</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/07/20/368594680/">Flutter 音乐播放器开发之路（一）</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/07/15/3650854255/">XaaS 到底是什么？</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/07/15/4036766117/">让 Windows 10 开机自动登录</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/07/14/466733536/">给 Flutter 项目初始化构建提个速</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/06/12/4125727764/">JavaScript 中 Splice 函数与数组塌陷</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/06/12/1586694155/">在 Java 中缩写 Lambda 表达式</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/06/04/2276828982/">博客文章规范</a>
                </span>
            </li>
            
        </ul>
    </div>
</aside>
    
    
    <aside id="sidebar-rand_posts">
    <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <div class="panel-heading">
            <i class="fa fa-refresh"></i>
            随机文章
            <i class="fa fa-times-circle panel-remove"></i>
            <i class="fa fa-chevron-circle-up panel-toggle"></i>
        </div>
        <ul class="list-group list-group-flush">
            
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/01/18/3575145262/">JDK 字符串截取的坑</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/06/05/167649745/">JVM 调优基本垃圾回收</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/05/15/1954507039/">WinRar 常用自解压路径及命令</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/02/21/783285968/">互联网金融产品的科普</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/01/24/3889357332/">三大定律</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2020/06/04/2276828982/">博客文章规范</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/04/15/4066886113/">简单鸡尾酒制作</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2017/12/22/2700866660/">解决 IDEA 打包输出缺少 mybatis 配置的 SQL 文件问题</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2019/06/13/1754570926/">逃离弱鸡业务循环</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2017/12/27/1367914797/">重建 Windows 图标缓存</a>
                </span>
            </li>
            
        </ul>
    </div>
</aside>
    
    
    <aside id="gal-sets">
        <div class="panel panel-gal hidden-xs" data-aos="fade-up" data-aos-duration="2000">
            <ul class="nav nav-pills pills-gal">

                
                <li>
                    <a href="/2018/05/18/2028463303/index.html#sidebar-tags" data-toggle="tab" id="tags-tab">热门标签</a>
                </li>
                
                
                <li>
                    <a href="/2018/05/18/2028463303/index.html#sidebar-friend-links" data-toggle="tab" id="friend-links-tab">友情链接</a>
                </li>
                
                
                <li>
                    <a href="/2018/05/18/2028463303/index.html#sidebar-links" data-toggle="tab" id="links-tab">个人链接</a>
                </li>
                
            </ul>
            <div class="tab-content">
                
                <div class="cloud-tags tab-pane nav bs-sidenav fade" id="sidebar-tags">
    
    <a href="/tags/SpringSecurity/" style="font-size: 10.298537427706187px;" class="tag-cloud-link">SpringSecurity</a>
    
    <a href="/tags/Xml/" style="font-size: 18.917933146822683px;" class="tag-cloud-link">Xml</a>
    
    <a href="/tags/随笔/" style="font-size: 12.492440496812527px;" class="tag-cloud-link">随笔</a>
    
    <a href="/tags/大前端/" style="font-size: 11.103393016562922px;" class="tag-cloud-link">大前端</a>
    
    <a href="/tags/Dart/" style="font-size: 10.459391349467152px;" class="tag-cloud-link">Dart</a>
    
    <a href="/tags/Flutter/" style="font-size: 14.039078659868391px;" class="tag-cloud-link">Flutter</a>
    
    <a href="/tags/Go/" style="font-size: 15.043615536092336px;" class="tag-cloud-link">Go</a>
    
    <a href="/tags/IDEA/" style="font-size: 11.450148159910935px;" class="tag-cloud-link">IDEA</a>
    
    <a href="/tags/Java/" style="font-size: 14.027457769766986px;" class="tag-cloud-link">Java</a>
    
    <a href="/tags/JavaScript/" style="font-size: 18.296721562645118px;" class="tag-cloud-link">JavaScript</a>
    
    <a href="/tags/Mysql/" style="font-size: 13.76702994238361px;" class="tag-cloud-link">Mysql</a>
    
    <a href="/tags/Oracle/" style="font-size: 19.437885269483587px;" class="tag-cloud-link">Oracle</a>
    
    <a href="/tags/Photoshop/" style="font-size: 9.217849509750582px;" class="tag-cloud-link">Photoshop</a>
    
    <a href="/tags/RPG-Maker-MV/" style="font-size: 17.292469746060224px;" class="tag-cloud-link">RPG Maker MV</a>
    
    <a href="/tags/Restful/" style="font-size: 17.913948130183307px;" class="tag-cloud-link">Restful</a>
    
    <a href="/tags/Redis/" style="font-size: 17.989288451229527px;" class="tag-cloud-link">Redis</a>
    
    <a href="/tags/SQL/" style="font-size: 10.79445158302072px;" class="tag-cloud-link">SQL</a>
    
    <a href="/tags/SpringBoot/" style="font-size: 11.241502767220641px;" class="tag-cloud-link">SpringBoot</a>
    
    <a href="/tags/Swagger/" style="font-size: 9.360199531989277px;" class="tag-cloud-link">Swagger</a>
    
    <a href="/tags/Windows/" style="font-size: 19.9965076286755px;" class="tag-cloud-link">Windows</a>
    
    <a href="/tags/Deepleanring/" style="font-size: 8.098306005492958px;" class="tag-cloud-link">Deepleanring</a>
    
    <a href="/tags/Vue/" style="font-size: 15.799585377222293px;" class="tag-cloud-link">Vue</a>
    
    <a href="/tags/Docker/" style="font-size: 19.862465404478527px;" class="tag-cloud-link">Docker</a>
    
    <a href="/tags/Hexo/" style="font-size: 8.064168957060916px;" class="tag-cloud-link">Hexo</a>
    
    <a href="/tags/VsCode/" style="font-size: 14.09306834841847px;" class="tag-cloud-link">VsCode</a>
    
    <a href="/tags/SpringCloud/" style="font-size: 17.45286886977243px;" class="tag-cloud-link">SpringCloud</a>
    
</div>
                
                
                <div class="friend-links tab-pane nav bs-sidenav fade" id="sidebar-friend-links">
    
    <li>
        <a href="http://noodlefighter.com" target="_blank">虾包</a>
    </li>
    
    <li>
        <a href="https://loli.la" target="_blank">超级叫了</a>
    </li>
    
    <li>
        <a href="https://konata9.github.io" target="_blank">吃土的小此方</a>
    </li>
    
</div>
                
                
                <div class="links tab-pane nav bs-sidenav fade" id="sidebar-links">
    
    <li>
        <a href="https://github.com/yihuishou" target="_blank">Github</a>
    </li>
    
    <li>
        <a href="https://gite.com/yihuishou" target="_blank">码云</a>
    </li>
    
    <li>
        <a href="https://www.zhihu.com/people/hei-yi-tian-shi-48" target="_blank">知乎</a>
    </li>
    
</div>
                
            </div>
        </div>
    </aside>
    
</aside>
            </div>
        </div>
    </div>
    <footer id="gal-footer">
    <div class="container">
        Copyright © 2018 挥手の骑士 Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>.&nbsp;Theme by <a href="https://github.com/ZEROKISEKI" target="_blank">AONOSORA</a>
    </div>
</footer>

<!-- 回到顶端 -->
<div id="gal-gotop">
    <i class="fa fa-angle-up"></i>
</div>
</body>
<script src="/js/activate-power-mode.js"></script>
<script>

    // 配置highslide
	hs.graphicsDir = '/js/highslide/graphics/'
    hs.outlineType = "rounded-white";
    hs.dimmingOpacity = 0.8;
    hs.outlineWhileAnimating = true;
    hs.showCredits = false;
    hs.captionEval = "this.thumb.alt";
    hs.numberPosition = "caption";
    hs.align = "center";
    hs.transitions = ["expand", "crossfade"];
    hs.lang.number = '共%2张图, 当前是第%1张';
    hs.addSlideshow({
      interval: 5000,
      repeat: true,
      useControls: true,
      fixedControls: "fit",
      overlayOptions: {
        opacity: 0.75,
        position: "bottom center",
        hideOnMouseOut: true
      }
    })

    // 初始化aos
    AOS.init({
      duration: 1000,
      delay: 0,
      easing: 'ease-out-back'
    });

</script>
<script>
	POWERMODE.colorful = 'true';    // make power mode colorful
	POWERMODE.shake = 'true';       // turn off shake
	// TODO 这里根据具体情况修改
	document.body.addEventListener('input', POWERMODE);
</script>
<script>
    window.slideConfig = {
      prefix: '/imgs/slide/background',
      ext: 'jpg',
      maxCount: '6'
    }
</script>
<script src="/js/hs.js"></script>
<script src="/js/blog.js"></script>



</html>